<template>
	<view class="member-page pageBg">
		<view @click="fanhui()" class="fanhui">
			<uni-icons type="left" size="30"></uni-icons>
		</view>
		
		<view class="title">{{ pageTitle }}</view>
		
		<!-- 加载状态 -->
		<view v-if="loading" class="loading">
			<text>加载中...</text>
		</view>
		
		<!-- 记录列表 -->
		<view v-else-if="tianxieList.length > 0" class="list-container">
			<view 
				v-for="(item, index) in tianxieList" 
				:key="item.id || index" 
				class="swipe-item"
				@touchstart="handleTouchStart($event, index)"
				@touchmove="handleTouchMove($event, index)"
				@touchend="handleTouchEnd($event, index)"
			>
				<!-- 滑动容器，包含卡片内容和操作按钮 -->
				<view 
					class="swipe-content"
					:style="{ transform: `translateX(${item.translateX || 0}px)` }"
				>
					<!-- 卡片内容区域 -->
					<view 
						class="list-item"
						@click="closeAllCards"
					>
						<view class="item-content">
							<text class="item-desc">{{ item.faultLocation || '处理地点' }}</text> 
							<text class="item-desc">{{ item.repairTime || '处理时间' }}</text>
						</view>
						<view class="item-content">
							<text class="item-desc">{{ item.reporter || '老师名称' }}</text>
							<text class="item-desc">{{ item.department || '老师学院' }}</text> 
						</view>
						<view class="item-content">
							<text class="item-desc">{{ item.handler || '处理人' }}</text>
							<text class="item-desc">{{ item.week || '第几周' }}</text> 
						</view>
						<uni-icons type="right" size="25"  ></uni-icons>
					</view>
					
					<!-- 操作按钮区域 -->
					<view class="action-buttons">
						<view class="action-btn edit-btn" @click.stop="editItem(item)">
							<uni-icons type="compose" size="20" color="#fff"></uni-icons>
							<text class="btn-text">修改</text>
						</view>
						<view class="action-btn delete-btn" @click.stop="confirmDelete(item)">
							<uni-icons type="trash" size="20" color="#fff"></uni-icons>
							<text class="btn-text">删除</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 空状态 -->
		<view v-else class="empty-state">
			<text class="empty-text">暂无填写记录</text>
			<button class="empty-btn" @click="refreshList">刷新</button>
		</view>
		
		<!-- 加载更多 -->
		<view v-if="hasMore && !loading" class="load-more" @click="loadMore">
			<text class="load-more-text">点击加载更多</text>
		</view>
		
		<!-- 没有更多数据 -->
		<view v-if="!hasMore && tianxieList.length > 0" class="no-more">
			<text class="no-more-text">没有更多数据了</text>
		</view>
		
		<!-- 下拉刷新 -->
		<view v-if="refreshing" class="refresh-indicator">
			<text>刷新中...</text>
		</view>
		
		<!-- 遮罩层，用于点击收回卡片 -->
		<!-- <view 
			v-if="hasOpenCard" 
			class="mask" 
			@click="closeAllCards"
		></view> -->
	</view>
</template>

<script setup>
	import { ref, computed, onMounted } from 'vue'
	import { onLoad } from '@dcloudio/uni-app'
	import { tianxieListAPI } from '@/api/tianxieList'
	import { repairAPI } from '@/api/repair'
	
	// 页面参数
	const pageType = ref('my') // 'my' 或 'all'
	const pageTitle = computed(() => pageType.value === 'all' ? '所有成员填写记录' : '我的填写记录')
	
	// 响应式数据
	const tianxieList = ref([])
	const loading = ref(false)
	const refreshing = ref(false)
	const hasMore = ref(true)
	const currentPage = ref(1)
	const pageSize = ref(20)
	
	// 触摸相关数据
	const touchData = ref({
		startX: 0,
		startY: 0,
		currentX: 0,
		isMoving: false,
		currentIndex: -1
	})
	
	// 计算是否有打开的卡片
	const hasOpenCard = computed(() => {
		return tianxieList.value.some(item => item.translateX < 0)
	})
	
	// 返回上一页
	const fanhui = () => {
		const e = ref('')
		if(pageType.value === 'all') {
			e.value = '/pages/gengduo/gengduo'
		} else {
			e.value = '/pages/user/user'
		}
		uni.switchTab({
			url: e.value
		})
	}  
	
	// 获取填写记录列表
	const getTianxieList = async (isRefresh = false) => {
		try {
			if (isRefresh) {
				currentPage.value = 1
				hasMore.value = true
				tianxieList.value = []
			}
			
			loading.value = true
			
			let response
			if (pageType.value === 'all') {
				// 获取全部记录
				response = await repairAPI.getAllRepairList({
					page: currentPage.value,
					limit: pageSize.value
				})
			} else {
				// 获取个人记录
				response = await tianxieListAPI.getMyTianxieList({
					page: currentPage.value,
					limit: pageSize.value
				})
			}
			
			// 处理响应数据
			let newData = []
			if (response && response.data) {
				newData = response.data
			} else if (Array.isArray(response)) {
				newData = response
			}
			
			// 判断是否还有更多数据
			if (newData.length < pageSize.value) {
				hasMore.value = false
			}
			
			// 添加数据到列表
			if (isRefresh) {
				tianxieList.value = newData
			} else {
				tianxieList.value = [...tianxieList.value, ...newData]
			}
			
		} catch (error) {
			console.error('获取填写记录列表失败:', error)
			uni.showToast({
				title: '获取数据失败',
				icon: 'none'
			})
			if (isRefresh) {
				tianxieList.value = []
			}
		} finally {
			loading.value = false
			refreshing.value = false
		}
	}
	
	// 刷新列表
	const refreshList = () => {
		refreshing.value = true
		getTianxieList(true)
	}
	
	// 加载更多
	const loadMore = () => {
		if (!hasMore.value || loading.value) return
		currentPage.value++
		getTianxieList(false)
	}
	
	// 关闭所有卡片
	const closeAllCards = () => {
		tianxieList.value.forEach(item => {
			item.translateX = 0
		})
	}
	
	// 触摸开始
	const handleTouchStart = (e, index) => {
		const touch = e.touches[0]
		
		// 先关闭其他已打开的卡片
		tianxieList.value.forEach((item, i) => {
			if (i !== index && item.translateX < 0) {
				item.translateX = 0
			}
		})
		
		touchData.value = {
			startX: touch.clientX,
			startY: touch.clientY,
			currentX: touch.clientX,
			isMoving: false,
			currentIndex: index
		}
	}
	
	// 触摸移动
	const handleTouchMove = (e, index) => {
		if (touchData.value.currentIndex !== index) return
		
		const touch = e.touches[0]
		const deltaX = touch.clientX - touchData.value.startX
		const deltaY = touch.clientY - touchData.value.startY
		
		// 更新当前触摸位置
		touchData.value.currentX = touch.clientX
		
		// 判断是否为水平滑动
		if (Math.abs(deltaX) > Math.abs(deltaY) && Math.abs(deltaX) > 10) {
			touchData.value.isMoving = true
			e.preventDefault()
		}
		
		if (touchData.value.isMoving) {
			// 限制滑动范围
			const maxSlide = -200 // 最大滑动距离
			const translateX = Math.max(maxSlide, Math.min(0, deltaX))
			
			// 更新当前项的translateX
			tianxieList.value[index].translateX = translateX
		}
	}
	
	// 触摸结束
	const handleTouchEnd = (e, index) => {
		if (touchData.value.currentIndex !== index) return
		
		const deltaX = touchData.value.currentX - touchData.value.startX
		
		if (touchData.value.isMoving) {
			// 判断是否应该显示操作按钮
			if (deltaX < -100) {
				// 显示操作按钮
				tianxieList.value[index].translateX = -200
			} else {
				// 隐藏操作按钮
				tianxieList.value[index].translateX = 0
			}
		}
		
		// 重置触摸数据
		touchData.value = {
			startX: 0,
			startY: 0,
			currentX: 0,
			isMoving: false,
			currentIndex: -1
		}
	}
	
	// 修改记录
	const editItem = (item) => {
		uni.navigateTo({
			url: `/pages/gengduo/components/xiugai/xiugai?id=${item.repairId}`
		})
	}
	
	// 确认删除
	const confirmDelete = (item) => {
		uni.showModal({
			title: '确认删除',
			content: `确定要删除"${item.faultLocation || '填写记录'}"吗？删除后无法恢复。`,
			confirmText: '删除',
			confirmColor: '#ff3b30',
			success: (res) => {
				if (res.confirm) {
					// 确认删除时执行删除操作
					deleteItem(item)
				} else {
					// 取消删除时收回卡片
					closeAllCards()
				}
			},
			fail: () => {
				// 弹窗失败时也收回卡片
				closeAllCards()
			}
		})
	}
	
	// 删除记录
	const deleteItem = async (item) => {
		try {
			uni.showLoading({
				title: '删除中...'
			})
			
			// 调用删除API
			await tianxieListAPI.deleteTianxie(item.repairId)
			
			// 从列表中移除
			const index = tianxieList.value.findIndex(i => i.repairId === item.repairId)
			if (index !== -1) {
				tianxieList.value.splice(index, 1)
			}
			
			// 删除成功后收回所有卡片
			closeAllCards()
			
			uni.showToast({
				title: '删除成功',
				icon: 'success'
			})
		} catch (error) {
			console.error('删除失败:', error)
			// 删除失败时也收回卡片
			closeAllCards()
			uni.showToast({
				title: '删除失败',
				icon: 'none'
			})
		} finally {
			uni.hideLoading()
		}
	}
	
	// 页面加载时获取参数和数据
	onLoad((options) => {
		if (options.type) {
			pageType.value = options.type
		}
		getTianxieList(true)
	})
	
	// 页面加载时获取数据
	onMounted(() => {
		// 如果没有通过onLoad获取参数，则使用默认值
		if (pageType.value === 'my') {
			getTianxieList(true)
		}
	})
</script>

<style lang="scss" scoped>
.member-page {
	padding: 20rpx;
}

.fanhui {
	margin-top: 80rpx;
}

.title {
	font-size: 36rpx;
	font-weight: bold;
	text-align: center;
	margin: 40rpx 0;
	color: #333;
}

.loading, .refresh-indicator {
	text-align: center;
	padding: 40rpx;
	color: #999;
}

.list-container {
	margin-top: 20rpx;
}

.swipe-item {
	position: relative;
	margin-bottom: 20rpx;
	overflow: hidden;
	border-radius: 16rpx;
}

.swipe-content {
	display: flex;
	transition: transform 0.3s ease;
	width: calc(100% + 200rpx);
}

.list-item {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	gap: 5rpx;
	background: #fff;
	border-radius: 16rpx;
	padding: 30rpx;
	box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
	border-left: 6rpx solid #007aff;
	position: relative;
	z-index: 2;
	flex: 1;
}
 

.item-content {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
	gap: 15rpx;
	margin-bottom: 16rpx;
}

.item-desc {
	font-size: 28rpx;
	color: #333;
}


.empty-state {
	text-align: center;
	padding: 100rpx 40rpx;
}

.empty-text {
	font-size: 32rpx;
	color: #999;
	margin-bottom: 40rpx;
	display: block;
}

.empty-btn {
	background-color: #007aff;
	color: #fff;
	border-radius: 32rpx;
	padding: 20rpx 60rpx;
	font-size: 28rpx;
	border: none;
}

.action-buttons {
	display: flex;
	width: 200rpx;
	flex-shrink: 0;
}

.action-btn {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 100rpx;
	height: 100%;
	color: #fff;
	font-size: 24rpx;
}

.edit-btn {
	background-color: #007aff;
}

.delete-btn {
	background-color: #ff3b30;
	border-radius: 0 16rpx 16rpx 0;
}

.btn-text {
	margin-top: 8rpx;
	font-size: 20rpx;
}

.load-more {
	text-align: center;
	padding: 40rpx;
	margin-top: 20rpx;
}

.load-more-text {
	color: #007aff;
	font-size: 28rpx;
}

.no-more {
	text-align: center;
	padding: 40rpx;
	margin-top: 20rpx;
}

.no-more-text {
	color: #999;
	font-size: 24rpx;
}
 
</style>